<template>
    <div class="top-box">
        <div class="top-left-menu" v-show="userTaskWaringCount">
            <div class="horn" @click="warningShow = !warningShow"><img src="@/assets/top/top_horn.png" alt=""></div>
            <div class="notice-box" @click="showWarning()">
                <span class="notice"> 您有 {{ userTaskWaringCount }} 个案件超时未完成，请前往超时清单页面查看。</span>
            </div>
        </div>
        <div class="top-right-menu">
            <el-button size="mini" type="danger" plain
                v-if="(userInfo.usertype == 6 || userInfo.usertype == 8) && userInfo.isHaveSurveyor"
                @click="workSearch(); tableDialog = true;">上下班管理</el-button>
            <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                    <img src="@/assets/top/top_person.png" alt="">
                    <!-- <el-avatar src="@/assets/top/top_person.png"></el-avatar> -->
                    {{ usertypeMapping[userInfo.userType] }} - {{ userInfo.userName }}<span style="font-size:12px;
                    text-indent: 16px;">{{
                        workStatusDec
                        }}</span><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="setup">设置</el-dropdown-item>
                    <el-dropdown-item command="stopRing">停止响铃</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- 工号设置 -->
        <el-dialog title="设置" :visible.sync="setupDialog" width="30%">
            <el-form :model="setupForm" size="small ">
                <el-form-item label="设置工号" label-width="120px" class="work-number">
                    <el-input class="number_input" v-model="setupForm.workNumber" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setupDialog = false">取 消</el-button>
                <el-button type="danger" @click="changeJobnum()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 上下班管理 -->
        <el-dialog title="" :visible.sync="tableDialog" width="70%">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item label="坐席状态" class="search-item">
                    <el-select v-model="formInline.workStatus" placeholder="坐席状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="上班" value="0"></el-option>
                        <el-option label="休息" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="条件筛选" class="search-item">
                    <el-input v-model="formInline.keywords" placeholder="请输入坐席姓名或工号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="mini" @click="workSearch">查询</el-button>
                    <el-button type="danger" size="mini" @click="resetWork">重置</el-button>
                    <el-button type="danger" size="mini" @click="batchChangeWork('0', 1)">批量上班</el-button>
                    <el-button type="danger" size="mini" @click="batchChangeWork('1', 1)">批量下班</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="multipleTable" :data="perWorkData" height="400" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column prop="userId" label="工号">
                </el-table-column>
                <el-table-column prop="userName" label="姓名">
                </el-table-column>
                <el-table-column prop="address" label="状态" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span :style="getStatusStyle(scope.row.workStatus)"
                            v-text="getStatusText(scope.row.workStatus)">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="changeWorkSts(scope.row)">{{ scope.row.workStatus == '0' ? '下班' :
                            '上班' }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getRole } from '@/api/other'
import { modifyWorkNumber, allSeat, batchChangeWorkStatus, getWorkStatus } from '@/api/user'
import { findUserTaskWaringCount } from '@/api/caseExtend'
export default {
    data() {
        return {
            tableDialog: false,
            setupDialog: false,
            usertypeMapping: [],
            userTaskWaringCount: 0,
            warningShow: false,
            perWorkData: [],
            multipleSelection: "",
            setupForm: {
                workNumber: '',
                userId: ''
            },
            formInline: {
                workStatus: '',
                keywords: '',
                groupId: "93fc6430f4b9470f812c8333a23b0ca7",
            },
            batchWorkquery: {
                workStatus: '',
                uid: '',
                isNotice: "0",
            },
            workStatusDec: '[ 工作 ]'
        }
    },
    async created() {
        try {
            this.usertypeMapping = await getRole();
        } catch (error) {
            console.error('Failed to load usertype mapping:', error);
        }
        this.findUserTaskWaringCount();
        // this.getWorkStatus();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
        })
    },
    methods: {
        showWarnin() {

        },
        // 获取预警数量
        findUserTaskWaringCount() {
            const params = {
                seatId: this.userInfo.userId,
                organIds: this.userInfo.cmpUserOrganId
            }
            findUserTaskWaringCount(params).then(res => {
                this.userTaskWaringCount = res.userTaskWaringCount;
            })
        },
        handleCommand(command) {
            if (command === 'setup') {
                this.setupDialog = true;
                this.setupForm.workNumber = sessionStorage.getItem("workNumber")
            } else if (command === 'stopRing') {
                // 停止响铃
            }
        },
        // 设置工号
        changeJobnum() {
            this.setupForm.userId = this.userInfo.userId;
            modifyWorkNumber(this.setupForm).then(() => {
                this.setupDialog = false;
                this.setupForm.workNumber = sessionStorage.setItem("workNumber", this.setupForm.workNumber)
                this.$message({
                    message: '设置成功',
                    type: 'success'
                })
            })
        },
        async workSearch() {
            const res = await allSeat(this.formInline);
            this.perWorkData = res.userList
        },
        // 重置
        resetWork() {
            this.formInline = {
                workStatus: '',
                keywords: '',
                groupId: "93fc6430f4b9470f812c8333a23b0ca7",
            }
            this.workSearch();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(item => { return item.userId }).join(',')
        },
        getWorkStatus() {
            const params = {
                groupId: this.userInfo.group,
                userId: this.userInfo.userId
            }
            getWorkStatus(params).then(res => {
                this.workStatusDec = res.msg;
                if (res.msg === '工作') {
                    this.$store.commit("work/SET_WORKSTATUS", 0);
                } else {
                    this.$store.commit("work/SET_WORKSTATUS", 1);
                }
            })
        },
        // 操作上下班
        batchChangeWork(status) {
            this.batchWorkquery.uid = this.multipleSelection;
            this.batchWorkquery.workStatus = status;
            batchChangeWorkStatus(this.batchWorkquery).then(() => {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                this.workSearch();
                this.$refs.multipleTable.clearSelection();
            }).catch(err => {
                console.error("batch work err", err);
                this.$message({
                    message: '操作失败，请重试',
                    type: 'warning'
                })
            })
        },
        changeWorkSts(row) {
            this.multipleSelection = row.userId;
            const status = row.workStatus === '0' ? '1' : row.workStatus === '1' ? '0' : '';
            this.batchChangeWork(status);
            this.$store.commit("work/SET_WORKSTATUS", status);
        },
        getStatusStyle(status) {
            return {
                color: status === '0' ? '#30B08F' : '#9f9b9b'
            };
        },
        getStatusText(status) {
            if (status === '0') {
                return '上班';
            } else if (status === '1') {
                return '休息';
            }
            return '异常';
        }
    },
    mounted() {

    }
}
</script>
<style lang='scss' scoped>
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.top-box {
    width: 100%;
    height: 60px;
    background: #FAFAFA;
    border-bottom: 1px solid #E2E2E2;
}

.top-left-menu {
    width: 420px;
    margin-top: 25px;
    cursor: pointer;
    line-height: 20px;
    display: flex;
    font-size: 14px;
    float: left;

    .horn {
        width: 20px;
        height: 20px;
        background: #FF4E33;
        border-radius: 50%;
        margin: 0 5px 0 20px;

        img {
            margin: 1px 0 0 1px;
            width: 85%;
            height: 85%;
        }
    }

    .notice-box {
        overflow: hidden;

        .notice {
            // overflow: hidden;
            font-size: 14px;
            text-indent: 16px;
            display: inline-block;
            white-space: nowrap;
            animation: scroll 18s linear infinite normal;
        }

    }
}

.top-right-menu {
    float: right;
    margin-top: 15px;
    display: flex;
    align-items: center;

    img {
        width: 23px;
        height: 22px;
        margin-right: 10px;
    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
        margin: 0 50px 0 40px;
        cursor: pointer;
    }
}

.search-item {
    margin-left: 20px;

    input {
        height: 36px;
        line-height: 36px;
        font-size: 12px;
    }
}

::v-deep.work-number .el-input {
    width: 85%;
}
</style>
